<template>
  <div class="second-list-wrapper">
    <ul class="second-list">
      <!-- 第一列 -->
      <li class="menu-item">
        <div class="link-item">
          <div class="svg-icon">
            <qushi></qushi>
          </div>
          <div>
            <div>AI Marketing Tools</div>
            <div class="desc-text">Instantly upgrade your marketing campaigns.</div>
          </div>
        </div>
        <div class="link-item">
          <div class="svg-icon">
            <star></star>
          </div>
          <div>
            <div>AI Graphic Design</div>
            <div class="desc-text">Instantly upgrade your design workflow.</div>
          </div>
        </div>
        <div class="link-item">
          <div class="svg-icon">
            <print></print>
          </div>
          <div>
            <div>AI Print on Demand</div>
            <div class="desc-text">Transform your digital art into print-ready masterpieces.</div>
          </div>
        </div>
      </li>
      <!-- 第二列 -->
      <li class="menu-item">
        <div class="link-item">
          <div class="svg-icon">
            <carmara></carmara>
          </div>
          <div>
            <div>AI Photography</div>
            <div class="desc-text">Uplift your portfolio with our flexible suite of creative AI tools,</div>
          </div>
        </div>
        <div class="link-item">
          <div class="svg-icon">
            <design></design>
          </div>
          <div>
            <div>AI Interior Design</div>
            <div class="desc-text">Your digital studio for interior design.</div>
          </div>
        </div>
        <div class="link-item">
          <div class="svg-icon">
            <house></house>
          </div>
          <div>
            <div>AI Architecture</div>
            <div class="desc-text">Architecture generator tools to enhance your workflow.</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import qushi from '~/assets/images/svg/qushi.vue'
import star from '~/assets/images/svg/star.vue'
import print from '~/assets/images/svg/print.vue'
import carmara from '~/assets/images/svg/carmara.vue'
import design from '~/assets/images/svg/design.vue'
import house from '~/assets/images/svg/house.vue'
</script>

<style lang="scss" scoped>
.second-list-wrapper {
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(100px);
  // 自动将内容撑开，否则必须写固定像素或者默认取父元素的宽度（父元素宽度明显是不够的）
  min-width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.second-list {
  // 通过这个增加与顶部的距离-本质还是第二层的容器高度。避免通过外出的 transform: translateY(12px) 产生的闪烁
  margin-top: 12px;
  padding-top: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  padding-left: 25px;
  border: 2px solid #171b29;
  background-image: linear-gradient(111deg, #020305 0%, #070a0f 100%);
  border-radius: 20px;

  display: grid;
  grid-template-columns: 300px 300px;
  grid-gap: 60px 25px;
  font-size: 14px;
}

.menu-item {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  font-weight: 400;
}
.link-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;

  &:hover {
    background-color: #10151f;
    transition: all 0.15s ease-in-out;
  }

  .svg-icon {
    flex-shrink: 0;
    width: 35px;
    height: 35px;
  }
}

.desc-text {
  font-size: 12px;
  color: #c5c9d9;
  line-height: 15px;
  margin-top: 3px;
}

// 预先让内容在 pad 屏幕移动 -50% 否则在展示的时候会出现 x,y都在移动，是斜向移动的效果
@media screen and (max-width: 1024px) {
  .second-list-wrapper {
    transform: translate(-50%, 100px);
  }
}
</style>
